<template>
	<view class="body">
		<view class="bg" v-if="resultImg==''">
			<view class="main" v-show="total > 0">
				<view class="header-view">
					<img src="https://tb.wuyouzhuan888.com/applet-icon/4ee7421f0a58a6a0d72cb36c1895a3bf.png">
					<view class="header-title">{{title}}</view>
					<view class="header-number">第{{index + 1}}题/共{{total}}题</view>
				</view>
				<view class="content">
					<view class="question">
						{{index + 1}}.{{selectQuestion.subject}}
					</view>

					<view :class="{ flipped: isFlipped, shaking: shouldShake }" @animationend="resetShake">
						<view class="img" v-if="selectQuestion.type == 2">
							<img mode="widthFix" :src="selectQuestion.images" style="max-width:100%;" alt="">
						</view>
						<view class="answer" :class="{active:index==activeIndex}"
							v-for="(item,index) in selectQuestion.options" @click="test(item.option,index)">
							<view class="option">{{item.option}}</view>
							<view class="desc">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
			<u-popup border-radius="20" v-model="adVipMask" mode="center">
				<image @click="adVipMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
					mode=""></image>

				<view class="qq">
					<adVipMask :usableDownload="usableDownload" :isIPhone="isIPhone" maskType="2"
						@clickWatchAd="clickWatchAd" @clickVip="clickVip" @closeDk="closeDk" />
				</view>
			</u-popup>
			<u-popup border-radius="20" v-model="sampleMask" mode="center">
				<image @click="sampleMask=false" class="close" src="https://tb.wuyouzhuan888.com/applet-icon/close.png"
					mode=""></image>
				<view class="qq">
					<sampleMask @clickSample="clickSample" />
				</view>
			</u-popup>
			<u-popup border-radius="20" v-model="noNumberMask" mode="center">
				<image @click="noNumberMask=false" class="close"
					src="https://tb.wuyouzhuan888.com/applet-icon/close.png" mode=""></image>
				<view class="qq">
					<noNumberMask :type="noNumberMaskType" :content="maskContent" @closeDk="closeDk"
						@clickVip="clickVip" />
				</view>
			</u-popup>
		</view>
		<image class="bimg" v-else :src="resultImg"></image>
	</view>
</template>
<script>
	import adVipMask from './mask/adVip.vue'
	import sampleMask from './mask/sample.vue'
	import saveMask from './mask/save.vue'
	import noNumberMask from './mask/noNumber.vue'
	export default {
		components: {
			adVipMask,
			sampleMask,
			saveMask,
			noNumberMask,
		},
		data() {
			return {
				noNumberMaskType: 1, //1 1个按钮 2 两个按钮
				noNumberMask: false,
				sampleMask: false,
				saveMask: false,
				adVipMask: false,
				maskContent: '',
				assessId: 0,
				creatorId: 0,
				accountId: 0,
				callbackId: 0,
				taskId: 0,
				movId: 0,
				collectionId: 0,
				urlId: 0,
				title: '',
				index: 0,
				total: 0,
				activeIndex: -1,
				questionList: [],
				selectQuestion: {},
				// 翻转效果
				isFlipped: false,
				// 抖动效果
				shouldShake: false,
				clickDisabled: false,
				// 结果集合
				result: '',
				// 是否会员
				isVip: false,
				// 是否能下载
				canDownload: false,
				// 每日能下载的总数
				canDownloadTotal: 0,
				// 剩余可下载的次数
				usableDownload: 0,
				// 激励广告ID
				incentiveAdId: '',
				// 广告加载状态 1成功 0失败
				adStatus: 1,
				// 苹果手机
				isIPhone: false,
				// 结果图片
				resultImg: '',
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			this.assessId = options.assessId;
			// this.creatorId = options.creatorId ?? 0;
			// this.accountId = options.accountId ?? 0;
			// this.callbackId = options.callbackId ?? 0;
			// this.taskId = options.taskId ?? 0;
			// this.movId = options.movId ?? 0;
			// this.collectionId = options.collectionId ?? 0;
			// this.urlId = options.urlId ?? 0;
			// 获取问题
			this.getQuestion()
			// 获取手机类型
			this.isIPhone = (uni.getSystemInfoSync().osName == 'ios')
			// 加载广告
			this.getAdInfo();
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			getResult() {
				this.$u.api.assess.getResult({
					assessId: this.assessId,
					creatorId: this.creatorId,
					accountId: this.accountId,
					taskId: this.taskId,
					movId: this.movId,
					collectionId: this.collectionId,
					callbackId: this.callbackId,
					urlId: this.urlId,
					group: this.result,
					adStatus: this.adStatus
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.resultImg = res.data.result
				})
			},
			async test(option, index) {
				// 点击被禁用
				if (this.clickDisabled) return
				// 禁用点击
				this.clickDisabled = true

				// 设置选中项
				this.activeIndex = index
				// 当前问题不是最后一题
				if (this.index + 1 < this.total) {
					// 拼接结果
					this.result += option

					setTimeout(() => {
						// 清空选中项
						this.activeIndex = -1;
						// 设置抖动
						this.shouldShake = false;
						// 设置翻转
						this.isFlipped = true;
						// 获取下一题
						this.index += 1;
						// 获取下一题
						this.selectQuestion = this.questionList[this.index]
					}, 100)
				} else {
					// 禁用点击
					this.clickDisabled = false
					// 截取当前结果中最后一次结果之前的数据（防止点击取消时结果累加）
					this.result = this.result.substr(0, this.index)
					// 拼接结果
					this.result += option
					// 获取用户下载信息
					await this.getUserDownloadInfo()
					// 用户是会员
					if (this.isVip) {
						// 今日下载次数没用完
						if (this.usableDownload) {
							// 执行下载
							this.getResult();
						} else {
							// 会员下载额度用完
							this.maskContent = '当前会员享受每日额度为' + this.canDownloadTotal + '次，今日已经全部消耗完，请明日再来~';
							this.noNumberMask = true
							this.noNumberMaskType = 1
							return
						}
					} else {
						// 今日下载次数没用完
						if (this.usableDownload) {
							// 打开下载弹窗
							this.adVipMask = true;
						} else {
							if (this.isIPhone) {
								this.maskContent = '已超今日限额，请明日再来！';
								this.noNumberMaskType = 1;
							} else {
								// 如果安卓 打开安卓弹窗
								this.maskContent = '已超今日限额，请明日再来；或开通会员畅享无广告趣味测试！！！';
								this.noNumberMaskType = 2;
							}
							this.noNumberMask = true
						}
					}
				}
			},
			closeDk() {
				this.adVipMask = false
				this.noNumberMask = false
			},
			// 点击会员
			clickVip() {
				// 关闭弹窗
				this.adVipMask = false
				this.noNumberMask = false
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?assessId=" + this.assessId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&callbackId=" + this.callbackId +
						"&taskId=" + this.taskId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						"&movId=" + this.movId,
					events: {
						isVip: data => {
							if (data == false) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							}
						}
					}
				})
			},
			// 点击体验卡
			clickSample() {
				// 打开体验会员弹窗
				uni.navigateTo({
					url: "/pages/sys/user_bags/buy?assessId=" + this.assessId +
						"&creatorId=" + this.creatorId +
						"&accountId=" + this.accountId +
						"&callbackId=" + this.callbackId +
						"&taskId=" + this.taskId +
						"&collectionId=" + this.collectionId +
						"&urlId=" + this.urlId +
						"&movId=" + this.movId +
						"&sample=" + true,
					events: {
						isVip: data => {
							if (data == false) {
								// 打开体验会员弹窗
								this.sampleMask = true;
							} else {
								this.sampleMask = false
							}
						}
					}
				})
			},
			// 点击看广告
			clickWatchAd() {
				// 关闭弹窗
				this.adVipMask = false

				// 广告加载成功
				if (this.adStatus == 1) {
					tt.showLoading({
						title: '广告加载中...'
					})
					this.ad.show()
				} else {
					// 广告加载失败 直接下载
					this.saveImage();
				}
			},
			// 获取广告信息
			async getAdInfo() {
				// 激励广告为空
				if (this.incentiveAdId == '') {
					// #ifdef MP-TOUTIAO
					// 获取抖音广告信息
					await this.getDyAdInfo();
					// #endif
				}
				// 加载广告组件
				this.ad = tt.createRewardedVideoAd({
					adUnitId: this.incentiveAdId
				});

				//防止奖励重复发放
				try {
					if (this.ad.closeHandler) {
						this.ad.offClose(this.ad.closeHandler);
					}
				} catch (e) {}

				// 监听错误
				this.ad.onError(err => {
					// 广告加载失败
					this.adStatus = 0;
				});

				// 关闭广告后执行
				this.ad.closeHandler = (res) => {
					tt.hideLoading();
					if (res.isEnded) {
						this.getResult();
					}
				}

				// 监听视频播放完成
				this.ad.onClose(this.ad.closeHandler);


				// 预加载资源
				this.ad.load();
			},
			// 获取抖音广告信息
			getDyAdInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getAdInfo().then(res => {
						if (res.code != 200) {
							// 激励广告ID
							this.incentiveAdId = '';
						} else {
							// 激励广告ID
							this.incentiveAdId = res.data.incentiveAdId;
						}
						resolve();
					})
				})
			},

			// 获取用户下载信息
			getUserDownloadInfo() {
				return new Promise((resolve) => {
					this.$u.api.download.getInfo().then(res => {
						if (res.code != 200) {
							uni.showModal({
								title: '获取用户信息失败',
								content: '请刷新后重试或重启小程序',
								showCancel: false,
								confirmText: '知道了'
							})
							// 是否会员
							this.isVip = false;
							// 是否能下载
							this.canDownload = false;
							// 每日能下载的总数
							this.canDownloadTotal = 0;
							// 剩余可下载的次数
							this.usableDownload = 0;
						} else {
							// 是否会员
							this.isVip = res.data.isVip;
							// 是否能下载
							this.canDownload = res.data.canDownload;
							// 每日能下载的总数
							this.canDownloadTotal = res.data.canDownloadTotal;
							// 剩余可下载的次数
							this.usableDownload = res.data.usableDownload;
						}
						resolve();
					})
				})
			},
			resetShake() {
				// 重置抖动
				this.shouldShake = true;
				// 重置点击
				this.clickDisabled = false;
				// 重置翻转
				this.isFlipped = false;
			},
			getQuestion() {
				this.$u.api.assess.getQuestion({
					assessId: this.assessId
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.index = 0;
					this.total = res.data.total
					this.questionList = res.data.list
					this.title = this.questionList[0].title
					this.selectQuestion = this.questionList[0]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%
	}

	.body {
		overflow: scroll;
		height: 100%;
		width: 100%;
		background-color: #efd1ff;
		position: fixed
	}

	.bimg {
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.bg {
		background: url('https://tb.wuyouzhuan888.com/applet-icon/879b3606f0dea8a5baa8f7ed9081282f.png') center;
		background-size: 100%;
		animation: bacIng 30s linear infinite;
		height: 100%;
		width: 100%;
	}

	@keyframes bacIng {
		0% {
			background-position: 0 0
		}

		100% {
			background-position: -2500rpx 1000rpx
		}
	}

	.main {
		width: 92%;
		margin: 0 auto;
		position: relative;
		top: 30rpx;
		padding-top: 130rpx;
		padding-bottom: 50rpx;
	}

	.header-view {
		width: 100%;
		position: absolute;
		top: 0;

		img {
			width: 100%;
			height: 180rpx;
		}
	}

	.header-title {
		color: #ffffff;
		position: absolute;
		top: 25%;
		left: 13%;
		font-size: 34rpx;
		width: 85%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.header-number {
		color: #86af9c;
		position: absolute;
		top: 62%;
		font-size: 28rpx;
		text-align: center;
		width: 100%;
	}

	.content {
		border: 8rpx solid #914cf6;
		border-bottom-left-radius: 25px;
		border-bottom-right-radius: 25px;
		background-color: #f8c2ff;
		padding: 50rpx 30rpx;

	}

	.img {
		justify-content: center;
		margin: 40rpx auto;
		width: calc(100% - 6px)
	}

	.img image {
		display: block;
		margin: 0 auto;
		background: #d7e6fc;
		border: 2rpx solid #000;
		padding: 4rpx
	}

	.question {
		color: #000000;
		font-size: 34rpx;
	}

	.active {
		background-color: #c068ff !important;

		.desc {
			color: #ffffff !important;
		}
	}

	.answer {
		margin: 40rpx 0;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #2f0d47;
		width: 100%;
		border-radius: 50rpx;
		border: 2rpx solid #c068ff;
		padding: 10rpx 0 10rpx 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.option {
			width: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			border: 1rpx solid #2b1a2d;
			display: inline-block;
		}

		.desc {
			width: 85%;
			display: inline-block;
			padding-left: 15rpx;
		}
	}

	.flipped {
		animation: flippedRotate 0.6s;
	}

	@keyframes flippedRotate {
		0% {
			transform: rotateZ(10deg) rotateY(90deg);
		}

		100% {
			transform: rotateZ(0deg) rotateY(0deg);

		}
	}

	.shaking {
		animation: shake 0.5s;
	}

	@keyframes shake {
		0% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-5px);
		}

		50% {
			transform: translateX(5px);
		}

		75% {
			transform: translateX(-5px);
		}

		100% {
			transform: translateX(0);
		}
	}
</style>